
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>jQuery在线考试倒计时界面</title>
    <link href="{{ url_for('static', filename='kaoshi/main.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ url_for('static', filename='kaoshi/iconfont.css') }}" rel="stylesheet" type="text/css" />
    <link href="{{ url_for('static', filename='kaoshi/test.css') }}" rel="stylesheet" type="text/css" />

    <style>
        .hasBeenAnswer {
            background: #5d9cec;
            color: #fff;
        }

        .reading h2 {
            width: 100%;
            margin: 20px 0 70px;
            text-align: center;
            line-height: 2;
            font-size: 20px;
            color: #59595b;
        }

            .reading h2 a {
                text-decoration: none;
                color: #59595b;
                font-size: 20px;
            }

                .reading h2 a:hover {
                    color: #2183f1;
                }
    </style>
</head>
<script>
function scalingImage(imgWidth, imgHeight, containerWidth, containerHeight) {
    var containerRatio = containerWidth / containerHeight;
    var imgRatio = imgWidth / imgHeight;

    if (imgRatio > containerRatio) {
        imgWidth = containerWidth;
        imgHeight = containerWidth / imgRatio;
    } else if (imgRatio < containerRatio) {
        imgHeight = containerHeight;
        imgWidth = containerHeight * imgRatio;
    } else {
        imgWidth = containerWidth;
        imgHeight = containerHeight;
    }

    return { width: imgWidth, height: imgHeight };
}
</script>
<body>
    <div class="main">
        <form id="myForm" action="/kaoshi/question_submit" method="post">
        <!--nr start-->
        <div class="test_main">
            <div class="nr_left">
                <div class="test">
                        <input type="hidden" name="sid" value="{{sid}}">
                        <input type="hidden" name="erid" value="{{erid}}">
                        <input type="hidden" id="paper_type" name="paper_type" value="{{paper_type}}">
                        {% for row in data %}
                        <div class="test_content">
                            <div class="test_content_title">
                                <h2>{{row["title"]}}</h2>
                                <p>
                                    <span>共</span><i class="content_lit">{{row["count"]}}</i><span>题，</span><span>合计</span><i class="content_fs">{{row["all_score"]}}</i><span>分</span>
                                </p>
                            </div>
                        </div>
                        <div class="test_content_nr">
                            <ul>
                                {% for child in row["child"] %}
                                <li id="{{child['li_order']}}">
                                    <div class="test_content_nr_tt">
                                        <i>{{child["orderkey"]}}</i><span>({{child["score"]}}分)</span><font>{{child["title"]}}</font>
                                        <b class="icon iconfont">&#xe8c1;</b>
                                        {% if child['other_comment'] != "" %}
                                        <p><img onload="scalingImg(this)" src="{{child['other_comment']}}"  width="" height=""></p>
                                        {% endif %}
                                        <input type="hidden" name="answer_{{child['li_order']}}" value="{{child['answer']}}">
                                        <input type="hidden" name="score_{{child['li_order']}}" value="{{child['score']}}">
                                        <input type="hidden" name="qid_{{child['li_order']}}" value="{{child['id']}}">
                                    </div>
                                    <div class="test_content_nr_main">
                                        <ul>
                                            {% for option in child["content"] %}
                                            <li class="option">
                                                {% if row["title"] == "单选题" or row["title"] == "判断题"%}
                                                <input type="radio" class="radioOrCheck" name="{{child['li_order']}}" value="{{option['ordername']}}" id="{{option['css']}}" >
                                                {% elif row["title"] == "多选题" %}
                                                <input type="checkbox" class="radioOrCheck" name="{{child['li_order']}}" value="{{option['ordername']}}" id="{{option['css']}}" >
                                                {% endif%}
                                                <label for="{{option['css']}}">
                                                    {{option['ordername']}}.
                                                    <p class="ue" style="display: inline;">{{option["title"]}}</p>
                                                </label>
                                            </li>
                                            {% endfor %}
                                        </ul>
                                    </div>
                                </li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endfor %}
                </div>

            </div>
            <div class="nr_right">
                <div class="nr_rt_main">
                    <div class="rt_nr1">
                        <div class="rt_nr1_title">
                            <h1>
                                <i class="icon iconfont"></i>答题卡
                            </h1>
                            <p class="test_time">
                                <i class="icon iconfont">&#xe8c0;</i><b class="alt-2">01:40:00</b>
                            </p>
                        </div>
                        {% for row in data %}
                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2>{{row["title"]}}</h2>
                                <p>
                                    <span>共</span><i class="content_lit">{{row["count"]}}</i><span>题</span>
                                </p>
                            </div>
                            <div class="rt_content_nr answerSheet">
                                <ul>
                                    {% for child in row["child"] %}
                                    <li><a href="#{{child['li_order']}}">{{child["orderkey"]}}</a></li>
                                    {% endfor %}
                                </ul>
                            </div>
                        </div>
                        {% endfor %}
                        <div class="rt_content">
                            <div class="rt_content_tt">
                                <h2><input type="submit" id="test_jiaojuan" value="交卷"></h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </form>
    </div>
    <div>
        <p>&nbsp;</p>
    </div>

    <script src="http://cdn.bootstrapmb.com/jquery/jquery-1.11.1.min.js"></script>
    <!-- <script src="jquery.easy-pie-chart.js"></script> -->
    <!--时间js-->
    <script src="{{ url_for('static', filename='kaoshi/jquery.countdown.js') }}"></script>
    <script>
        window.jQuery(function ($) {
            "use strict";
            $('.alt-1').countDown({
                css_class: 'countdown-alt-1',
                onTimeElapsed:function(){
                    alert("倒计时结束，自动提交试卷");
                }
            });
            $('.alt-2').countDown({
                css_class: 'countdown-alt-2'
            });

        });


        $(function () {
            $('li.option label').click(function () {
                var examId = $(this).closest('.test_content_nr_main').closest('li').attr('id'); // 得到题目ID
                var cardLi = $('a[href=#' + examId + ']'); // 根据题目ID找到对应答题卡
                // 设置已答题
                if (!cardLi.hasClass('hasBeenAnswer')) {
                    cardLi.addClass('hasBeenAnswer');
                }

            });
        });
        document.getElementById("myForm").addEventListener("submit", function (event) {
            event.preventDefault();
            var formData = $(this).serialize();
            $.ajax({
                url: "/kaoshi/question_submit",
                type: "POST",
                data: formData,
                success: function (response) {
                    rs = JSON.parse(response);
                    alert("你的考试得分为："+rs["data"]["score"]+"分");
                    if($('#paper_type').val() == "自动组题"){
                        history.go("-1");
                    }else{
                        window.location.href="/kaoshi/cat_read?pagename=exam_record&w=erid@{{erid}}|uid@{{uid}}&title=考试系统|考试成绩";
                    }
                    return false;
                },
                error: function () {
                    alert('请求失败');
                }
            });
        });
    </script>


</body>

</html>


